<template>
  <div class="conbox">
    <div class="list">
          <template v-if="!$util.isEmpty(list.data)">
            <div
              class="item"
              v-for="item in list.data"
              :key="item.article_id"
              @click="toDetail(item.article_id)"
              >
              <span class="problem_title">{{ item.title }}</span>
              <view class="iconfont iconjiantou"></view>
            </div>
          </template>
          <app-wrapper-empty
            v-else
            title="暂无数据内容"
            :is-empty="$util.isEmpty(list.data)"/>
    </div>
  </div>
</template>

<script>
import { getProblemList } from '@/api/center'
import { list } from '@/mixins'
import AppWrapperEmpty from '@/components/App_wrapper_empty'

export default {
	name: 'ProblemList',
	mixins: [list],
	components: {
		AppWrapperEmpty
	},
	data() {
		return {
			list: {
				limit: 12
			}
		}
	},
	onLoad() {
		this.getList()
	},
	onPullDownRefresh() {
		this.resetList()
		this.list.limit = 12
		this.getList().then((res) => {
			uni.stopPullDownRefresh()
		})
	},
	onReachBottom() {
      	if (this.list.finished) {
			uni.showToast({
				title: '没有更多了',
				icon: 'none'
			})
			return
		}
		if (this.list.loading) {
			return
		}
		this.getList()
	},
	methods: {
		getList() {
			this.list.loading = true
			return getProblemList({
				page: this.list.page,
				limit: this.list.limit
			}).then((res) => {
				this.completes(res)
			})
		},

		toDetail(id) {
			uni.navigateTo({
				url: `/pages/admin/helpCenter/problemDetail?id=${id}`
			})
		}
	}
}
</script>

<style scoped lang="scss">
.conbox {
  background-color: #F5F5F5;
  // padding-top: 88px;
  margin-bottom: 100px;
}
.titlename {
  margin-left: 0 !important;
  font-size:36px;
  font-weight:600;
  color:rgba(4,4,4,1);
}
.list {
 /* margin-top: 20px;*/
  padding-left: 30px;
  padding-bottom: 0!important;
  background-color: #fff;
  .item {
    padding-right: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 110px;
    box-shadow:0px 1px 0px 0px rgba(221,221,221,1);
    &:last-child {
      box-shadow: none;
    }
    .problem_title {
      font-size:30px;
      font-weight:400;
      color:rgba(51,51,51,1);
    }
  }

}
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background:rgba(255,255,255,1);
  box-shadow:0px -3px 10px 0px rgba(0, 0, 0, 0.1);
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    width: 184px;
    height: 52px;
  }
}
</style>
